<template>
  <div class="row">
    <div
      :class="`steps ${data?.sku_track_node_status > idx ? 'atv' : ''}`"
      v-for="(item, idx) in steps"
      :key="idx"
    >
      <div class="h-[44px] mb-[4px]">
        <!-- <div v-if="trackAvg">
          {{
            idx === 0 && data[item.avgDate]
              ? "标准:" + data[item.avgDate]
              : data[item.avgDate]
          }}
        </div> -->
        <div class="flex w-[150px] mb-[4px]">
          <span class="w-[100px]">{{
            idx === 0 && data[item.avgDate]
              ? "标准:" + data[item.avgDate]
              : data[item.avgDate]
          }}</span>
          <template v-if="idx < 7 && data?.sku_track_node_status > idx">
            <span
              v-if="getValueByPath(item.isprRealday)"
              class="px-[4px] rounded-md border"
              >{{ getValueByPath(item.prRealday) || 0 }}天 ✓
            </span>
            <span v-else class="px-[4px] rounded-md border"
              >{{ getValueByPath(item.prRealday) || 0 }}天 !
            </span>
          </template>
        </div>
        <!-- <div v-if="trackStandard">
          {{
            idx === 0 && data[item.preDate]
              ? "平均:" + data[item.preDate]
              : data[item.preDate]
          }}
        </div> -->
        <div class="flex w-[150px]">
          <span class="w-[100px]">{{
            idx === 0 && data[item.preDate]
              ? "平均:" + data[item.preDate]
              : data[item.preDate]
          }}</span>
          <template v-if="idx < 7 && data?.sku_track_node_status > idx">
            <span
              v-if="getValueByPath(item.isavgRealday)"
              class="px-[4px] rounded-md border"
              >{{ getValueByPath(item.avgRealday) }}天 ✓
            </span>
            <span v-else class="px-[4px] rounded-md border"
              >{{ getValueByPath(item.avgRealday) }}天 !
            </span>
          </template>
        </div>
      </div>
      <div class="img-step">
        <img :src="imgPath(item.icon)" alt="" class="h-[32px] w-[32px] icon" />
        <SvgIcon
          icon-class="state_finish_cover"
          class="icon-step text-[16px]"
          v-if="data?.sku_track_node_status > idx"
        ></SvgIcon>
        <SvgIcon
          icon-class="state_wait_cover"
          class="icon-step text-[16px]"
          v-if="data?.sku_track_node_status == idx"
        ></SvgIcon>
        <div class="iborder" v-if="idx < 7"></div>
      </div>
      <div class="text-[var(--base-text-color)]">
        {{ item.title }}
      </div>
      <div class="flex w-[150px]">
        <span class="w-[100px]">{{ data[item.date] }}</span>
        <template v-if="idx < 7 && data?.sku_track_node_status > idx">
          <span v-if="data[item.isrealday]" class="px-[4px] rounded-md border"
            >{{ data[item.realday] || 0 }}天 ✓
          </span>
          <span v-else class="px-[4px] rounded-md border"
            >{{ data[item.realday] || 0 }}天 !
          </span>
        </template>
      </div>
    </div>
  </div>
  <div class="flex justify-around status mt-[6px]">
    <div>
      <!-- <div v-if="trackStandard">
        上架(第一次)-上架完成(标准):
        {{ data?.pre_first_listing2complete_diff_days_standard || 0 }} 天
      </div>
      <div v-if="trackAvg">
        上架(第一次)-上架完成(平均):
        {{ data?.pre_first_listing2complete_diff_days || 0 }} 天
      </div> -->
      <div>预计送仓时间:{{ data?.pre_delivery_warehouse_date || "-" }}</div>
    </div>
    <div>
      <!-- <div v-if="trackStandard">
        发货-签收时效(标准):
        {{ data?.pre_shipping2signed_diff_days_standard || 0 }} 天
      </div>
      <div v-if="trackAvg">
        发货-签收时效(平均):{{ data?.pre_shipping2signed_diff_days || 0 }} 天
      </div> -->
      <div>发货-签收时效:{{ data?.shipping2signed_diff_days || 0 }} 天</div>
    </div>
    <div>
      <!-- <div v-if="trackStandard">
        签收-上架(第一次)(标准):
        {{ data?.pre_signed2first_listing_diff_days_standard || 0 }} 天
      </div>
      <div v-if="trackAvg">
        签收-上架(第一次)(平均):
        {{ data?.pre_signed2first_listing_diff_days || 0 }} 天
      </div> -->
      <div>
        签收-上架(第一次):{{ data?.signed2first_listing_diff_days || 0 }} 天
      </div>
    </div>
    <div>
      <!-- <div v-if="trackStandard">
        上架(第一次)-上架完成(标准):
        {{ data?.pre_first_listing2complete_diff_days_standard || 0 }} 天
      </div>
      <div v-if="trackAvg">
        上架(第一次)-上架完成(平均):
        {{ data?.pre_first_listing2complete_diff_days || 0 }} 天
      </div> -->
      <div>
        上架(第一次)-上架完成:{{ data?.first_listing2complete_diff_days || 0 }}
        天
      </div>
    </div>
  </div>
</template>
<script setup lang="jsx">
import { isPermission } from "@/hooks/permission.js";
import SvgIcon from "@/components/SvgIcon/index.vue";
const trackStandard = computed(() =>
  isPermission(["/tms/logistics-manage/track-initial/standard"])
);
const trackAvg = computed(() =>
  isPermission(["/tms/logistics-manage/track-initial/avg"])
);
const props = defineProps({
  data: { type: Object, default: () => {} },
});
const { data } = toRefs(props);
const imgPath = (name) => {
  return new URL(`./img/${name}`, import.meta.url).href;
};
const steps = reactive([
  {
    title: "发货",
    icon: "1.png",
    date: "shipping_date",
    preDate: "pre_shipping_date",
    avgDate: "pre_shipping_date_standard",
    realday: "shipping_sailing_days",
    isrealday: "is_real_shipping_sailing_days",
    isprRealday: "is_pre_standard_group.is_shipping_sailing_days",
    prRealday: "is_pre_standard_group.pre_shipping_sailing_days_standard",
    isavgRealday: "is_pre_avg_group.is_pre_shipping_sailing_days",
    avgRealday: "is_pre_avg_group.pre_shipping_sailing_days",
  },
  {
    title: "开船",
    icon: "2.png",
    date: "sailing_date",
    preDate: "pre_sailing_date",
    avgDate: "pre_sailing_date_standard",
    realday: "sailing_arrival_days",
    isrealday: "is_real_sailing_arrival_days",
    isprRealday: "is_pre_standard_group.is_sailing_arrival_days",
    prRealday: "is_pre_standard_group.pre_sailing_arrival_days_standard",
    isavgRealday: "is_pre_avg_group.is_pre_sailing_arrival_days",
    avgRealday: "is_pre_avg_group.pre_sailing_arrival_days",
  },
  {
    title: "到港",
    icon: "2.png",
    date: "arrival_date",
    preDate: "pre_arrival_date",
    avgDate: "pre_arrival_date_standard",
    realday: "arrival_customs_clearance_days",
    isrealday: "is_real_arrival_customs_clearance_days",
    isprRealday: "is_pre_standard_group.is_arrival_customs_clearance_days",
    prRealday:
      "is_pre_standard_group.pre_arrival_customs_clearance_days_standard",
    isavgRealday: "is_pre_avg_group.is_pre_arrival_customs_clearance_days",
    avgRealday: "is_pre_avg_group.pre_arrival_customs_clearance_days",
  },
  {
    title: "清关（完成）",
    icon: "4.png",
    date: "customs_clearance_date",
    preDate: "pre_customs_clearance_date",
    avgDate: "pre_customs_clearance_date_standard",
    realday: "customs_clearance_pickup_days",
    isrealday: "is_real_customs_clearance_pickup_days",
    isprRealday: "is_pre_standard_group.is_customs_clearance_pickup_days",
    prRealday:
      "is_pre_standard_group.pre_customs_clearance_pickup_days_standard",
    isavgRealday: "is_pre_avg_group.is_pre_customs_clearance_pickup_days",
    avgRealday: "is_pre_avg_group.pre_customs_clearance_pickup_days",
  },
  {
    title: "提取",
    icon: "5.png",
    date: "pickup_date",
    preDate: "pre_pickup_date",
    avgDate: "pre_pickup_date_standard",
    realday: "pickup_signed_days",
    isrealday: "is_real_pickup_signed_days",
    isprRealday: "is_pre_standard_group.is_pickup_signed_days",
    prRealday: "is_pre_standard_group.pre_pickup_signed_days_standard",
    isavgRealday: "is_pre_avg_group.is_pre_pickup_signed_days",
    avgRealday: "is_pre_avg_group.pre_pickup_signed_days",
  },
  {
    title: "签收",
    icon: "6.png",
    date: "signed_date",
    preDate: "pre_signed_date",
    avgDate: "pre_signed_date_standard",
    realday: "signed_first_listing_days",
    isrealday: "is_real_signed_first_listing_days",
    isprRealday: "is_pre_standard_group.is_signed_first_listing_days",
    prRealday: "is_pre_standard_group.pre_signed_first_listing_days_standard",
    isavgRealday: "is_pre_avg_group.is_pre_signed_first_listing_days",
    avgRealday: "is_pre_avg_group.pre_signed_first_listing_days",
  },
  {
    title: "上架（第一次）",
    icon: "7.png",
    date: "first_listing_date",
    preDate: "pre_first_listing_date",
    avgDate: "pre_first_listing_date_standard",
    realday: "first_listing_complete_days",
    isrealday: "is_real_first_listing_complete_days",
    isprRealday: "is_pre_standard_group.is_first_listing_complete_days",
    prRealday: "is_pre_standard_group.pre_first_listing_complete_days_standard",
    isavgRealday: "is_pre_avg_group.is_pre_first_listing_complete_days",
    avgRealday: "is_pre_avg_group.pre_first_listing_complete_days",
  },
  {
    title: "上架完成",
    icon: "8.png",
    date: "listing_completion_date",
    preDate: "pre_listing_completion_date",
    avgDate: "pre_listing_completion_date_standard",
  },
]);
const getValueByPath = (path) => {
  return path.split(".").reduce((acc, key) => acc?.[key], data.value) ?? 0;
};
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: space-between;
  * {
    font-size: 12px;
    color: var(--base-sub-text-color);
  }
  .iborder {
    width: 90px;
    height: 0;
    border-bottom: 2px dashed var(--base-border-color);
    position: relative;
    top: -18px;
    left: 72px;
  }
}
.steps {
  height: 120px;
  width: 100px;
  text-align: center;
  .icon {
    background: var(--base-small-color);
    margin: auto;
    margin-top: 4px;
    border-radius: 50px;
  }
  &.atv {
    .icon {
      background: var(--base-primary-dark-bg);
    }
  }
}
.status {
  * {
    font-size: 12px;
    color: var(--base-sub-text-color);
  }
}
.img-step {
  position: relative;
  .icon-step {
    position: absolute;
    right: 28px;
    bottom: 0px;
    color: transparent;
  }
}
</style>
